<template>
  <div class="box">
    <div class="demo-form-inline">
      <el-button type="success" class="newElement" @click="openDrawer('add')"
        >添加菜单</el-button
      >
      <el-table
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        :data="tableData"
        :tree-props="defaultProps"
      >
        <el-table-column prop="title" label="标题"  width="180">
          <template #default={row}>
            <i v-if="row.is_point" class="el-icon-view">{{row.title}}</i>
            <i v-else-if="!row.is_point && row.childs" class="el-icon-folder-opened">{{row.title}}</i>
            <i v-else class="el-icon-document-remove">{{row.title}}</i>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码"  width="920">
        </el-table-column>
        <el-table-column  label="操作" align='center'>
          <template #default={row}>
            <el-button type="primary" icon="el-icon-edit" circle @click="openDrawer('edit',row.id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="openDrawer('del',row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <MenuApp ref="menu" @handleCloseModal='handleCloseModal' :text='drawerType'></MenuApp>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import MenuApp from '@/module-manage/components/menu-add'
export default {
  components: {
    MenuApp
  },
  data () {
    return {
      tableData: [],
      tableArr: [],
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      drawerType: ''
    }
  },

  async created () {
    this.initData()
  },

  methods: {
    async initData () {
      const { data } = await list()
      this.tableData = this.setKeyChild(data)
      console.log(data)
    },
    openDrawer (value, id) {
      if (value === 'add') {
        this.drawerType = '创建菜单'
        this.$refs.menu.dialogFormV()
      } else if (value === 'edit') {
        this.drawerType = '编辑菜单'
        this.$refs.menu.dialogFormV()
        this.$refs.menu.typeStatus = true
        this.$refs.menu.hanldeEditForm(id)
      } else {
        this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await remove({ id })
          this.initData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    setKeyChild (data) {
      const newData = new data.constructor()
      for (const k in data) {
        if (data[k] instanceof Object) {
          if (k === 'points') {
            newData.childs = this.setKeyChild(data[k])
          } else {
            newData[k] = this.setKeyChild(data[k])
          }
        } else {
          newData[k] = data[k]
        }
      }
      return newData
    },
    load (tree, treeNode, resolve) {},
    handleCloseModal () {
      this.$refs.menu.dialogFormH()
      this.$refs.menu.handleResetForm()
      this.initData()
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  padding: 0 20px;
}
.demo-form-inline {
  position: relative;
  width: 1300px;
  height: 585px;
  background-color: #fff;
  margin-right: 20px;
  margin-top: 10px;
}
.newElement {
  margin-left: 1000px;
  margin: 20px 0 20px 1180px;
}

.el-icon-edit {
  width: 35px;
  height: 35px;
  padding: 10px;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  border-radius: 50%;
}
.el-icon-delete {
  width: 35px;
  height: 35px;
  padding: 10px;
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  border-radius: 50%;
  margin-left: 10px;
}
i{
  padding-left: 5px;
  font-size: 14px;
}
</style>
